<template>
  <div >
    <!--右边抽屉-->
    <el-drawer
      :title="def.categoryName"
      :visible.sync="drawer"
      :append-to-body='true'>
      <!-- 功能按钮 -->
      <el-button size="small" type="primary" style="margin-left: 20px;margin-bottom: 10px" @click="toSaveDef">新增</el-button>
      <!--抽屉列表-->
      <el-table  v-loading="loading" element-loading-text="数据加载中" :data="tableData" :header-cell-style="{background:'#f0f0f0'}" :row-style="{height: '0'}" :cell-style="{padding: '0'}" max-height="700px">
        <el-table-column  type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column v-if="def.parentCategoryId" label="上级字典值" width="180">
          <template slot-scope="scope">
            {{ scope.row.parentDefName ? scope.row.parentDefName : '/' }}
          </template>
        </el-table-column>
        <el-table-column prop="defName" label="字典值" width="180"/>
        <el-table-column prop="remark" label="描述"/>
        <el-table-column prop="sortNum" label="排序值"/>
        <el-table-column prop="state" label="状态" width="70">
          <template slot-scope="scope">
            <span>{{ scope.row.enabled == 1 ? '启用' : scope.row.enabled == 0 ? '禁用' : '' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="70">
          <template slot-scope="scope">
            <el-button type="text" @click.stop="toSaveDef($event,scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--抽屉分页-->
      <div style=" background-color: #ffffff;padding: 20px 10px;">
        <el-pagination
          @size-change="handleDefSizeChange"
          @current-change="handleDefCurrentChange"
          :current-page="queryData.pageNumber"
          :page-sizes="[10,50,100,200]"
          :page-size="queryData.pageSize"
          layout=" total,sizes,->,jumper, prev, pager, next"
          :total="totalSize">
        </el-pagination>
      </div>
    </el-drawer>
    <!--字典值弹窗-->
    <el-dialog  title="编辑" :visible.sync="saveDialog" v-if="saveDialog" width="630px"append-to-body :close-on-click-modal="false"
                @close="clearDefEditForm">
      <el-form ref="defEditForm" label-width="86px" label-position="left" :model="saveData" :rules="saveRules">
        <el-form-item v-if="def.parentDefId" label="上级字典值" prop="parentDefId">
          <el-select v-model="saveData.parentDefId" placeholder="请选择">
            <el-option v-for="item in parentDefList" :key="item.defId" :label="item.defName" :value="item.defId"/>
          </el-select>
        </el-form-item>
        <el-form-item label="字典值" prop="defName">
          <el-input v-model.trim="saveData.defName" placeholder="请输入字典值，最多可输入20字"/>
        </el-form-item>
        <el-form-item label="状态" prop="enabled">
          <el-select v-model="saveData.enabled" placeholder="请选择">
            <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="排序值" prop="sortNum">
          <el-input-number v-model="saveData.sortNum" controls-position="right" :min="1"/>
        </el-form-item>
        <el-form-item label="描述" prop="remark">
          <el-input v-model.trim="saveData.remark" type="textarea" resize="none" placeholder="请输入描述" show-word-limit :autosize="{minRows: 6, maxRows: 6}" :maxlength="100"/>
        </el-form-item>
      </el-form>
      <template slot="footer">
        <el-button @click="clearDefEditForm">取消</el-button>
        <el-button type="primary" @click="saveDef">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'def',
  data() {
    return {
      drawer:false,
      def:{},
      parentDefList:[],
      //列表搜索字段
      queryData:{
        categoryId:'',
        //当前页
        pageNumber: 1,
        //每一页条数
        pageSize: 10,
      },
      //列表数据
      tableData: [],
      //是否展示编辑框
      saveDialog: false,
      //字典值保存字段
      saveData:{
        categoryId:'',
        parentDefId: '', // 上级字典值
        defName: '', // 字典值
        enabled: '1', // 状态
        sortNum: '', // 排序值
        remark: '' // 描述
      },
      saveRules:{
        parentDefId: [{
          required: true,
          message: '请选择上级字典值',
          trigger: 'change'
        }],
        defName: [{
          required: true,
          message: '请输入字典值',
          trigger: 'blur'
        },
          {
            max: 20,
            message: '长度在 20 个字符以内',
            trigger: 'blur'
          }
        ],
        enabled: [{
          required: true,
          message: '请选择状态',
          trigger: 'change'
        }],
        sortNum: [{
          required: true,
          message: '请选择输入排序值',
          trigger: 'blur'
        }]
      },
      // 字典状态类型下拉选择
      typeList: [{value: '1', label: '启用'},
                 {value: '0', label: '禁用'}
                ],

      //总条数
      totalSize: 0,
      //是否在加载数据
      loading: false,
      // 是否开启调试输出
      debug: true
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() { // 渲染后执行
    // 查询数据
    this.$bus.$on('openDef',(data)=>{
      this.drawer=true;
      this.def=data;
      this.queryData.categoryId=data.categoryId
      this.dataList();
    })
  },
  methods: {
    //字典值列表
    dataList(){
      this.loading = true;
      this.$api.dictionary.defList(this.queryData ).then(resp => {
        this.tableData =resp.data;
        this.totalSize=resp.totalSize;
        // 完成赋值后，把加载状态赋值为false
      })
      this.loading = false;
    },
    //获取父级
    geDeftByCategoryId(){
      let id=this.def.parentCategoryId;
      if(this.$common.isEmpty(id)){
        return;
      }
      this.$api.dictionary.getByCategoryId({categoryId:id} ).then(resp => {
        this.parentDefList =resp.data;
      })
    },
    //保存字典值弹窗
    toSaveDef(e,def){
      if(def){
        this.saveData=JSON.parse(JSON.stringify(def));
      }
      this.saveData.categoryId= this.queryData.categoryId
      this.saveDialog=true;
      this.geDeftByCategoryId();
    },
    saveDef(){
      this.$refs.defEditForm.validate(async (valid) => {
        if (valid) {
          this.$api.dictionary.defSave(this.saveData).then(resp => {
            this. dataList()
          })
          this.saveDialog = false
        } else {
          return false
        }
      })
    },
    clearDefEditForm(){
      this.saveData={
        parentDefId: '', // 上级字典值
        defName: '', // 字典值
        enabled: '1', // 状态
        sortNum: '', // 排序值
        remark: '' // 描述
      }
      this.saveDialog = false
    },
    //分页
    handleDefSizeChange(val) {
      this.queryData.pageSize=val;
      this.dataList();
    },
    handleDefCurrentChange(val) {
      this.queryData.pageNumber=val;
      this.dataList();
    },
  },
  beforeDestroy() {
    console.log("def关闭")
    this.$bus.$off('openDef')
  },
}
</script>

<style >
  .example {}
</style>
